<example name="Island">
  <file type="html">
    <div id="island"></div>
  </file>

  <file type="js">
     import {render} from 'react-dom';
     import React from 'react';
     import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';

     const renderIslandDemo = () => (
       <Island>
         <Header border>Title</Header>
         <Content>Content</Content>
       </Island>
     );

     render(renderIslandDemo(), document.getElementById('island'));
  </file>
</example>

<example name="Island with scroll">
  <file type="html">
    <div id="island"></div>
  </file>

  <file type="css">
    :global(.limited-island) {
      height: 200px;
      width: 200px;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';

    const renderIslandDemo = () => (
    <Island className="limited-island" narrow>
      <Header border>Title</Header>
      <Content fade>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged.
      </Content>
    </Island>
    );

    render(renderIslandDemo(), document.getElementById('island'));
  </file>
</example>

<example name="Adaptive island with resizeable header">
  <file type="html">
    <div id="island"></div>
  </file>

  <file type="css">
    :global(.limited-island) {
      height: 200px;
      width: 200px;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import {AdaptiveIsland, Header, Content, HeaderResizer} from '@jetbrains/ring-ui/components/island/island';

    const renderIslandDemo = () => (
    <AdaptiveIsland className="limited-island" narrow>
      <Header>Title</Header>
      <Content fade>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged.
      </Content>
    </AdaptiveIsland>
    );

    render(renderIslandDemo(), document.getElementById('island'));
  </file>
</example>
